<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row spannel_list">
        <div class="col-sm-3 col-xs-6">
          <div class="spannel">
            <em>10015</em><span>篇</span>
            <b>总文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor01">
            <em>123</em><span>篇</span>
            <b>日新增文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor02">
            <em>35</em><span>条</span>
            <b>评论总数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor03">
            <em>123</em><span>条</span>
            <b>日新增评论数</b>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row curve-pie">
        <div class="col-lg-8 col-md-8">
          <div class="gragh_pannel" id="curve_show"></div>
        </div>
        <div class="col-lg-4 col-md-4">
          <div class="gragh_pannel" id="pie_show"></div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./api/http.js"></script>
    <script src="./js/main_count.js"></script>

    <!-- 折线图 -->
    <script>
      /* var json =
        '{"code":200,"msg":"获取成功","date":[{"date":"2019-05-20","count":23},{"date":"2019-05-21","count":19},{"date":"2019-05-22","count":29},{"date":"2019-05-23","count":24},{"date":"2019-05-24","count":28},{"date":"2019-05-25","count":28},{"date":"2019-05-26","count":19},{"date":"2019-05-27","count":25},{"date":"2019-05-28","count":25}]}';
      var obj = JSON.parse(json); */
      //   loadEchars(obj);

      function loadEchars(obj) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("curve_show"));

        var data = [];
        var date = [];
        for (var i = 0; i < obj.date.length; i++) {
          data.push(obj.date[i].count);
          date.push(obj.date[i].date);
        }

        option = {
          tooltip: {
            trigger: "axis",
            position: function (pt) {
              return [pt[0], "10%"];
            },
          },
          title: {
            left: "center",
            text: "日新增文章数",
          },

          xAxis: {
            name: "日",
            type: "category",
            boundaryGap: false,
            data: date,
          },
          legend: {
            data: ["新增文章"],
            top: "40",
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: "none",
              },
              dataView: { readOnly: false },
              magicType: { type: ["line", "bar"] },
              restore: {},
              saveAsImage: {},
            },
            right: 50,
          },
          yAxis: {
            type: "value",
            boundaryGap: [0, "100%"],
          },
          series: [
            {
              name: "新增文章",
              type: "line",
              smooth: true,
              // symbol: 'none',
              sampling: "average",
              itemStyle: {
                color: "#f80",
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(255,136,0,0.39)",
                  },
                  {
                    offset: 0.34,
                    color: "rgba(255,180,0,0.25)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,222,0,0.00)",
                  },
                ]),
              },
              data: data,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    </script>

    <!-- 环形图 -->
    <script>
      function loadAnnular(res) {
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("pie_show"));

        const annularLike = [];
        const annularArt = [];
        for (let i = 0; i < res.date.length; i++) {
          annularLike.push(res.date[i].name);
          annularArt.push({
            value: res.date[i].articles,
            name: res.date[i].name,
          });
        }
        // console.log(annularLike);
        // console.log(annularArt);

        option1 = {
          title: {
            left: "center",
            text: "分类文章数量比",
            top: 10,
            bottom: 10,
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          legend: {
            orient: "horizontal",
            x: "center",
            data: annularLike,
            top: 40,
          },
          color: ["#5885e8", "#13cfd5", "#00ce68", "#ff9565", "#20ff19"],
          series: [
            {
              name: "分类名称",
              type: "pie",
              radius: ["40%", "50%"],
              top: "50%",
              avoidLabelOverlap: false,
              label: {
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                  },
                },
              },
              data: annularArt,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
      }
    </script>

    <!-- 柱状图 -->
    <script>
      function loadBar(res) {
        const barArt = [];
        for (let i = 0; i < res.date.length - 1; i++) {
          barArt.push(res.date[i].articles);
        }
        // console.log(barArt);

        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById("column_show"));

        option2 = {
          title: {
            left: "center",
            text: "分类访问量",
            top: 10,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            data: ["爱生活", "趣美味", "爱旅行", "爱电影", "爱游泳"],
            top: 40,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "2%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: ["一月", "二月", "三月", "四月"],
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          color: ["#5885e8", "#13cfd5", "#00ce68", "#ff9565", "#20ff19"],
          series: [
            {
              name: "爱生活",
              type: "bar",
              data: barArt,
            },
            {
              name: "趣美味",
              type: "bar",
              data: barArt,
            },
            {
              name: "爱旅行",
              type: "bar",
              data: barArt,
            },
            {
              name: "爱电影",
              type: "bar",
              data: barArt,
            },
            {
              name: "爱游泳",
              type: "bar",
              data: barArt,
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
      }
    </script>
  </body>
</html>
